<template>
	<view class="content">
		<view class="top_box">
			<view class="userInfo_box">
				<image src="../../static/images/logo.jpg" mode=""></image>
				<view class="info_box">
					<view class="name">
						{{userInfo.username}}
					</view>
					<view class="phone">
						{{userInfo.phone}}
					</view>
				</view>
			</view>
		</view>
		<view class="info_manage public_style">
			<view class="title_box">
				信息管理
			</view>
			<view class="tools">
				<view class="tool_item" v-for="item,index in commonTools " :key="index" @click="jumpOtherPage(item.id)">
					<view class="top_img" :style="{backgroundColor:item.bgc}">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="bottom_text">
						{{item.text}}
					</view>
				</view>
			</view>
			<view class="bottom_box">
				<view class="submit_btn">
					<u-button @click="logOut" color="#39cccc" shape="circle" type="primary" text="退出登录"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		LogoutApi
	} from '@/api/login.js'
	export default {
		data() {
			return {
				// userInfo: {},
				commonTools: [{
						id: 1,
						img: '/static/images/sctp.png',
						text: '上传图片',
						bgc: '#4cd964'
					},
					{
						id: 2,
						img: '/static/images/editPassword.png',
						text: '修改密码',
						bgc: '#007aff'
					},
					// {
					// 	id: 3,
					// 	img: '/static/images/tiaobo.png',
					// 	text: '借用',
					// 	bgc: '#f0ad4e'
					// },
					// {
					// 	id: 4,
					// 	img: '/static/images/pandian.png',
					// 	text: '盘点',
					// 	bgc: '#dd524d'
					// },
					// {
					// 	id: 5,
					// 	img: '/static/images/chuku.png',
					// 	text: '分类管理',
					// 	bgc: '#4cd964'
					// },
					// {
					// 	id: 6,
					// 	img: '/static/images/ruku.png',
					// 	text: '品牌管理',
					// 	bgc: '#007aff'
					// },
					// {
					// 	id: 7,
					// 	img: '/static/images/tiaobo.png',
					// 	text: '分类管理',
					// 	bgc: '#f0ad4e'
					// },
					// {
					// 	id: 8,
					// 	img: '/static/images/pandian.png',
					// 	text: '品牌管理',
					// 	bgc: '#dd524d'
					// },
				],
			};
		},

		mounted() {
			// const that = this
			// uni.getStorage({
			// 	key: 'userInfo',
			// 	success(res) {
			// 		that.userInfo = res.data
			// 	}
			// })
		},
		computed: {
			...mapGetters([
				'userInfo'
			])
		},
		methods: {
			jumpOtherPage(id) {
				switch (id) {
					case 1:
						uni.navigateTo({
							url: '/infoManagePages/faceEnter/faceEnter'
						})
						break
					case 2:
						uni.navigateTo({
							url: '/infoManagePages/changePassword/changePassword'
						})
						break
				}
			},
			//退出登录
			async logOut() {
				await LogoutApi()
				this.$store.commit('user/REMOVE_USER_INFO')
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 90vh;
		background-color: #f3f4f6;
		position: relative;

		.top_box {
			display: flex;
			align-items: center;
			width: 750rpx;
			height: 500rpx;
			background: linear-gradient(45deg, #39cccc, #1ecf87);
			border-radius: 0 0 375rpx 375rpx/0 0 60rpx 60rpx;

			.userInfo_box {
				display: flex;
				align-items: center;
				color: #fff;

				image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					margin-left: 70rpx;
				}

				.name {
					font-size: 36rpx;
					font-weight: 700;
					margin-bottom: 30rpx;
				}

				.phone {
					font-size: 26rpx;
				}
			}
		}

		.info_manage {
			width: 710rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin: -120rpx 20rpx 0;

			.title_box {
				padding: 20rpx;
				border-bottom: 1px solid #e4e7ed;
				font-weight: 700;
				margin-bottom: 20rpx;
			}
		}

		.public_style {
			.tools {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				/* 左对齐 */
				flex-wrap: wrap;

				/* 换行 */
				.tool_item {
					width: 25%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin-bottom: 20rpx;

					.top_img {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 110rpx;
						height: 110rpx;
						border-radius: 20rpx;
						background-color: #4cd964;
						margin-bottom: 5rpx;

						image {
							width: 70%;
							height: 70%;
						}
					}

					.bottom_text {
						text-align: center;
						font-size: $uni-font-size-base;
					}

				}
			}
		}

		.bottom_box {
			display: flex;
			justify-content: center;
			align-items: center;
			// z-index: 99;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 160rpx;

			.submit_btn {
				width: 600rpx;
			}
		}
	}
</style>